<!doctype html>
<html>
<head>
  <title>Learning jQuery</title>
  <meta charset="utf-8" />
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
  <style>
    #wrapper {
      width:500px;
      margin:0 auto;
      font-family: helvetica;
      font-size: 1.2em;
    }
    input {
      border-radius:10px;
      width:200px;
      height: 40px;
      padding: 5px;
      font-size: 1.2em;
      border: 1px solid grey;
      margin-bottom:10px;
    }
    label {
      float:left;
      width:200px;
      padding-top: 15px;
    }
    .clear {
      clear: both;
    }
    #submitButton {
      margin-left:100px;
    }

    #error {
      color:red;
      margin:24px;
    }
  </style>
</head>

<body>
  <div id="wrapper">
    <div id="error"></div>
    <form id="validationForm">
      <label for="email">Email</label>
      <input name="email" id="email"></input>
      <p class="clear"></p>
      <label for="phone">Phone</label>
      <input name="phone" id="phone"></input>
      <p class="clear"></p>
      <label for="password">Password</label>
      <input name="password" type="password" id="pass"></input>
      <p class="clear"></p>
      <label for="conPass">Confirm password</label>
      <input name="conPass" type="password" id="conPass"></input>
      <p class="clear"></p>
      <input id="submitButton" type="submit" value="Submit"></input>
    </form>
  </div>

  <script type="text/javascript">
    function isValidEmailAddress(emailAddress) {
      var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
      return pattern.test(emailAddress);
    };

    $("#validationForm").submit(function(event){
      var errorMessage="";
      event.preventDefault();
      if (!isValidEmailAddress($("#email").val())) {
        errorMessage="Please enter a valid email address.<br />";
      }
      if (!$.isNumeric($("#phone").val())) {
        errorMessage=errorMessage+"Please enter a valid phone number.<br />";
      }

      var pass=$("#pass").val();
      var conPass=$("#conPass").val();

      if (pass != conPass) {
        errorMessage=errorMessage+"Please enter matching password.<br />";
      }
      $("#error").html(errorMessage);

      if (""==errorMessage) {
        alert("Success!");
      }
    });
  </script>
</body>
</html>
